<!DOCTYPE html>
<html>
<head>
    <title>YOLOv5 Image Detection</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-upload
            class="upload-demo"
            drag
            action=""
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :show-file-list="false">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">Drag file here or click to upload</div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" title="Detection Results">
            <img :src="image" alt="Result Image" style="width: 100%;">
            <el-table :data="detections" style="width: 100%;">
                <el-table-column prop="name" label="Name"></el-table-column>
                <el-table-column prop="confidence" label="Confidence"></el-table-column>
                <el-table-column prop="xmin" label="X Min"></el-table-column>
                <el-table-column prop="ymin" label="Y Min"></el-table-column>
                <el-table-column prop="xmax" label="X Max"></el-table-column>
                <el-table-column prop="ymax" label="Y Max"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    dialogVisible: false,
                    image: '',
                    detections: []
                };
            },
            methods: {
                beforeUpload(file) {
                    const formData = new FormData();
                    formData.append('file', file);

                    fetch('/upload', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        this.image = 'data:image/png;base64,' + data.image;
                        this.detections = JSON.parse(data.detections);
                        this.dialogVisible = true;
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });

                    return false; // Prevent default upload
                },
                handleSuccess(response, file, fileList) {
                    // Handle success
                }
            }
        });
    </script>
</body>
</html>
